<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <template>
        <el-table :data="applicationTable" style="width: 100%" @row-click="rowclick">
          <el-table-column prop="ApplicantsId" label="申请人学号" width="180"></el-table-column>
          <el-table-column prop="ApplicationType" label="申请类型" width="180"></el-table-column>
          <el-table-column prop="ByTheTime" label="申请时间"></el-table-column>
        </el-table>
        <el-drawer title="审批详情" :visible.sync="drawer" :direction="direction" size="40%">
          <div class="personInfo">
            <el-descriptions title="个人信息" :column="1">
              <el-descriptions-item label="姓名">
                {{oldStuInfo.StuName}}
                <template v-if="stuInfo.StuName!=oldStuInfo.StuName">
                  <span style="color:red">修改为</span>
                  {{stuInfo.StuName}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{oldStuInfo.StuPhone}}
                <template v-if="stuInfo.StuPhone!=oldStuInfo.StuPhone">
                  <span style="color:red">修改为</span>
                  {{stuInfo.StuPhone}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                {{oldStuInfo.StuSex}}
                <template v-if="stuInfo.StuSex!=oldStuInfo.StuSex">
                  <span style="color:red">修改为</span>
                  {{stuInfo.StuSex}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="年龄">
                {{oldStuInfo.StuAge}}
                <template v-if="stuInfo.StuAge!=oldStuInfo.StuAge">
                  <span style="color:red">修改为</span>
                  {{stuInfo.StuAge}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="入学时间">
                {{oldStuInfo.StubackTime}}
                <template v-if="stuInfo.StubackTime!=oldStuInfo.StubackTime">
                  <span style="color:red">修改为</span>
                  {{stuInfo.StubackTime}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">
                {{oldStuInfo.StuEmail}}
                <template v-if="stuInfo.StuEmail!=oldStuInfo.StuEmail">
                  <span style="color:red">修改为</span>
                  {{stuInfo.StuEmail}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="籍贯">
                {{oldStuInfo.NativePlace}}
                <template v-if="stuInfo.NativePlace!=oldStuInfo.NativePlace">
                  <span style="color:red">修改为</span>
                  {{stuInfo.NativePlace}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="政治面貌">
                {{oldStuInfo.PoliticalLandscape}}
                <template
                  v-if="stuInfo.PoliticalLandscape!=oldStuInfo.PoliticalLandscape"
                >
                  <span style="color:red">修改为</span>
                  {{stuInfo.PoliticalLandscape}}
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="民族">
                {{oldStuInfo.National}}
                <template v-if="stuInfo.National!=oldStuInfo.National">
                  <span style="color:red">修改为</span>
                  {{stuInfo.National}}
                </template>
              </el-descriptions-item>
            </el-descriptions>

            <el-button
              type="success"
              round
              @click="AlterStuCounselorApproval(1)"
              v-if="Status==1"
            >同意</el-button>
            <template v-if="Status==2">
              <h3>您已同意改申请</h3>
            </template>

            <el-button type="danger" round @click="AlterStuCounselorApproval(2)" v-if="Status==1">拒绝</el-button>
            <template v-if="Status==3">
              <h3>您已拒绝改申请</h3>
            </template>
          </div>
        </el-drawer>
      </template>
    </div>
  </div>
</template>

<script>
import studentMainleft from "@/components/studentMainleft";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      user: null,
      applicationTable: [],
      stuInfo: {},
      oldStuInfo: {},
      applicationFormId: -1,
      Status:1,
    };
  },
  created() {
    this.GetStudentApplicationFormByWorkerToken();
  },
  mounted() {},
  methods: {
    AlterStuCounselorApproval(status) {
      this.$axios({
        method: "put",
        url: this.$api.AlterStuCounselorApproval,
        params: {
          token: this.user.Token,
          status: status,
          applicationFormId: this.applicationFormId
        }
      }).then(res => {
        if (rew.data.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
        }
      });
    },
    rowclick(row, column, event) {
      console.log(row);
      this.Status=row.Status
      this.applicationFormId = row.Id;
      this.$axios({
        method: "get",
        url: this.$api.GetStudent,
        params: {
          StuId: row.ApplicantsId
        }
      }).then(res => {
        this.oldStuInfo = res.data.message;
      });
      var arr = JSON.parse(row.InfoJson);
      this.stuInfo = arr[0];
      this.stuInfo.
      this.drawer = true;
    },

    GetStudentApplicationFormByWorkerToken() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.$axios({
        method: "get",
        url: this.$api.GetStudentApplicationFormByWorkerToken,
        params: {
          token: this.user.Token,
          classId: this.user.ClassId
        }
      }).then(res => {
        this.applicationTable = res.data.message;
      });
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}
.right {
  width: 100%;
  background-color: white;
  height: 80%;
  margin-left: 10px;
}
.personInfo {
  margin: 30px;
}
</style>
